<template>
	<div>
		<!--面包屑导航区域-->
		<el-breadcrumb separator-class="el-icon-arrow-right">
		  <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
		  <el-breadcrumb-item>权限管理</el-breadcrumb-item>
		  <el-breadcrumb-item>角色列表</el-breadcrumb-item>
		</el-breadcrumb>
		<!--卡片视图-->
		<el-card>
			<!--添加角色按钮区域-->
			<el-row>
				<el-col>
					<el-button type="primary">添加角色</el-button>
				</el-col>
			</el-row>
			<!--角色列表区域-->
			<el-table :data="rolelist" border strip>
				<!-- type="expand" 展开列-->				
				<el-table-column type="expand">
					<template slot-scope="scope">
					<!-- 	
					    <pre>
							{{scope.row}}  scope.row拿到的是当前角色的数据
						</pre>
					-->
						<el-row :class="['vcenter','bdbottom',i1===0?'bdtop':'']" v-for="(item1,i1) in scope.row.children" :key="item1.id">
							<!--渲染一级权限-->
							<el-col :span="5">
								<el-tag @close="removeRightById(scope.row,item1.id)" closable>{{item1.authName}}</el-tag>
								<i class="el-icon-caret-right"></i>
							</el-col>
							<!--渲染和三级二级权限-->
							<el-col :span="19">
								<el-row  :class="['vcenter',i2===0?'':'bdtop']" v-for="(item2,i2) in item1.children" :key="item2.id">
									<el-col :span="6">
										<el-tag @close="removeRightById(scope.row,item2.id)" closable type="success">
											{{item2.authName}}
										</el-tag>
										<i class="el-icon-caret-right"></i>
									</el-col>
									
									<el-col :span="18">
										<el-tag @close="removeRightById(scope.row,item3.id)" closable type="warning" v-for="(item3,i3) in item2.children" :key="item3.id">
											{{item3.authName}}
										</el-tag>
									</el-col>
								</el-row>
							</el-col>
						</el-row>
						
					</template>
				</el-table-column>
				
                <el-table-column type="index"></el-table-column>		
				<el-table-column label="角色名称" prop="roleName"></el-table-column>	
				<el-table-column label="角色描述" prop="roleDesc"></el-table-column>	
				<el-table-column label="操作" width="300px">
					<template slot-scope="scope">
						<!-- {{scope.row}} -->
						<el-button size="mini" type="primary" icon="el-icon-edit">编辑</el-button>
						<el-button size="mini" type="danger" icon="el-icon-delete">删除</el-button>
						<el-button @click="showSetRightDialog(scope.row)" size="mini" type="warning" icon="el-icon-setting">分配权限</el-button>
					</template>
				</el-table-column>	
			</el-table>
		</el-card>
		
		<!--分配权限的对话框-->
		<el-dialog
		  title="分配权限"
		  :visible.sync="showSetRightDialogVisible"
		  width="50%"
		  @close="setRightDialogClosed">
		 
		 <!--
		    树形控件
			show-checkbox 节点是否可被选择 显示复选框
			
		    node-key 每个树节点用来作为唯一标
			识的属性，整棵树应该是唯一的	
			
			default-expand-all 默认展开的节点的 key 的数组
			
			default-checked-keys
		 -->
		 <el-tree ref="treeRef" :default-checked-keys="defKeys" default-expand-all node-key="id" show-checkbox :data="rightsList" :props="treeProps"></el-tree>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="showSetRightDialogVisible = false">取 消</el-button>
		    <el-button type="primary" @click="allotRights">确 定</el-button>
		  </span>
		</el-dialog>

	</div>
</template>

<script>
	export default{
		data(){
			return {
				//所有角色列表数据
				rolelist:[],
				//控制分配权限对话框的显示与隐藏
				showSetRightDialogVisible:false,
				//所有权限的数据
				rightsList:[],
				//树形控件的属性绑定对象
				treeProps:{
					//看获取到的权限数据结构
					label:"authName",
					children:"children"
				},
				//默认选中的节点id值数组
				defKeys:[],
				//当前即将分配权限的角色id
				roleId:""
			}
		},
		methods:{
			//获取所有角色的列表
			async getRolesList(){
				const res=await this.$http.get("roles");
				console.log("角色列表:",res);
				if(res.status!==200){
					return this.$message.error("获取角色列表失败！");
				}
				this.rolelist=res.data.data;
				console.log("rolelist:",this.rolelist);
			},
			//根据id删除对应的权限
			async removeRightById(role,rightId){
				//弹框提示用户是否要删除
				
				//$confirm返回的是字符串"confirm"或者"cancel"
			    const result01 = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
			          confirmButtonText: '确定',
			          cancelButtonText: '取消',
			          type: 'warning'
			        }).catch(err=>err)
					console.log("删除权限result01:",result01);
				if(result01!=="confirm"){
					return this.$message.info("取消了删除！");
				}	
				console.log("确认了删除！");
				const result02=await this.$http.delete(`roles/${role.id}/rights/${rightId}`);
				console.log("删除权限result02:",result02);
				if(result02.status!==200){
					return this.$message.error("删除权限失败!");
				} 
				
				//this.getRolesList();  //整个页面会重新渲染 权限面板会被合上
				//下面的操作权限面板不会被合上
				//把服务器返回的最新权限直接赋给当前角色的children
				console.log("role.children:",role.children);
				console.log("result02.data:",result02.data);
				role.children=result02.data.data;
			},
			//展示分配权限的对话框
			async showSetRightDialog(role){
				this.roleId=role.id;
				//获取所有权限的数据
				const res=await this.$http.get("rights/tree");
				 
				 console.log("showSetRightDialog的res:",res);
				 if(res.status!==200){
					 return this.$message.error("获取权限数据失败！");
				 }
				  
				 this.rightsList=res.data.data;
				 //递归获取三级节点的id
				 this.getLeafKeys(role,this.defKeys);
				 this.showSetRightDialogVisible=true;
			},
			
			//通过递归的形式，获取角色下所有的三级权限
			//的id，并保存到defKeys数组中
			//展示分配权限的对话框的时候调用
			getLeafKeys(node,arr){
				//如果当前node节点不包含children属性，则是三级节点
				console.log("node:",node);
				if(!node.children){
					return arr.push(node.id);
				}
				
				node.children.forEach(item=>this.getLeafKeys(item,arr));
			},
			//监听分配权限对话框的关闭事件
			setRightDialogClosed(){
				this.defKeys=[];
			},
			//点击为角色分配权限
			async allotRights(){
				// //1.展开数组,可以将数组成员一个个展开
				//   let arr = [1, 2, 3, 4, 5]
				//   console.log(arr);//[1, 2, 3, 4, 5]
				//   console.log(...arr);//1 2 3 4 5
				
				// // 2.需求:将arr添加到temp
				//   let temp = ['a', 'b', 'c']
				//   temp.push(...arr)
				//   console.log(temp);//["a", "b", "c", 1, 2, 3, 4, 5]
				const keys=[ //放入半选中和全选中的id
				   //下面的方法看文档
					...this.$refs.treeRef.getCheckedKeys(), //选中的
				    ...this.$refs.treeRef.getHalfCheckedKeys() //半选中的  这里出错
				];
				
				console.log("keys:",keys);
				const idStr=keys.join(",");
				console.log("roleId:",this.roleId);
				console.log("idStr:",idStr);
				const res=await this.$http.post(`roles/${this.roleId}/rights`,{rids:idStr});
				console.log("allotRights的res:",res);
				if(res.status!==200){
					return this.$message.error("分配权限失败！");
				}
				this.$message.success("分配权限成功！");
				this.getRolesList();
				this.showSetRightDialogVisible=false;
			 
			}
		},
		created(){
			this.getRolesList();
		}
	}
</script>

<style lang="less" scoped>
	.el-tag{
		margin: 7px;
	}
	
	.bdtop{
		border-top:1px solid #eee;
	}
	
	.bdbottom{
		border-bottom:1px solid #eee;
	}
	
	.vcenter{
		display: flex;
		align-items: center;
	}
</style>
